<template>
  <div>
    <!--表头-->
    <div class="title" style="width: 80%;margin-left: 10%;">
      <h3>收藏</h3>
      <el-table
        ref="multipleTable"
        @row-click="goDesc"
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%;">
<!--        商品图片-->
        <el-table-column label="商品" prop="img" width="110px" align="center">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px;" :src="scope.row.img"/>
          </template>
        </el-table-column>
        <!--        商品名字-->
        <el-table-column label="商品名" prop="name" align="center"></el-table-column>
        <!--        商品单价-->
        <el-table-column label="单价"  prop="prize" width="110px" align="center">
          <template slot-scope="scope">
            <span>&yen;</span>{{scope.row.prize}}
          </template>
        </el-table-column>
        <!--        上下架状态-->
        <el-table-column label="状态"  prop="prize" width="110px" align="center">
          <template slot-scope="scope">
            <el-tag :type="goodsStatus(scope.row.status)">{{scope.row.status==1?"下架":"在售"}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="width: 80%;margin-left: 10%;">

    </div>
  </div>
</template>

<script>
  export default {
    name: "collection",
    data()
    {
      return{
        tableData: [{
          name: '去内脏八爪鱼',
          prize:598.00,
          status:"1",
          img:"https://img13.360buyimg.com/n7/jfs/t1/156044/37/8082/528791/601369c2E3e5ab1f1/cdc30c8f82d78b1e.jpg",
          nums:1
        }, {
          name: '大虾',
          prize:638.90,
          status:"2",
          img:"https://img12.360buyimg.com/n7/jfs/t1/168477/39/21159/927428/6087c649E0ac7ebce/b87f6b39346eb746.png",
          nums:2
        }],
        search : '',
      }
    },
    created() {
      if (this.$route.query.tableDataOne.name!=null){
        this.tableData.push(this.$route.query.tableDataOne)
      }
    },
    methods:{
      goodsStatus(status)
      {
        if(status=="1")
          return "danger";
        else if(status=="2")
          return "";
      },
      goDesc(goods, column, event)
      {
        console.log(goods)
        this.$router.push({
          path:'/goodsDesc',
          query:{
            goods:goods
          }
        });
      },
    }
  }
</script>

<style scoped>
  .title{
    margin-top: 50px;
  }
  .title h3{
    /*float: left;*/
    font-size: 23px;
    color: #c91623;
  }
</style>
